<template>
    <div v-transfer-dom class="signup">
        <popup v-model="currentSignupShow" position="bottom" @on-hide="close_Detail_Signup">
            <div class="signup_box">
                <div class="signup_header">
                    请选择套餐
                </div>
                <group>
                    <cell 
                        v-for="(item, index) of packageList" 
                        :key="item.id" 
                        @click.native="handleClickItem(index)" 
                        :class="{
                            'active-border': currentItemIndex !== null? currentItemIndex === index? true : false : false 
                        }"
                    >
                        <div slot="title" class="signup_body_left">
                            <p class="signup_body_left_title">{{item.productname}}</p>
                            <p class="signup_body_left_remain">{{item.productmemo}}</p>
                        </div>
                        <div class="signup_body_right">
                            <p class="signup_body_left_money">￥{{item.productamount}}</p>
                            <p class="signup_body_left_gift">赠送：{{item.paygiftmoney}}狗币</p>
                        </div>
                    </cell>
                </group>
                <div class="signup_bottom">
                    <div>
                        <svg class="icon cell_icon" aria-hidden="true" slot="icon" style="width:.42rem;height:.42rem;vertical-align: -0.1rem">
                            <use xlink:href="#icon-gantanhao"></use>
                        </svg>
                    </div>
                    <div class="signup_bottom_tips">
                        限本人报名且每账号只能购票一张，若希望邀请好友一起参加，可点击右上角把页面分享给好友，成功邀请可获得<em style="color: red">20</em>狗币奖励哦！
                    </div>
                </div>
                <div class="signup_button">
                    <flexbox :gutter="0">
                        <flexbox-item><button class="signup_button-cancel" @click="handleCloseSignup">取消</button></flexbox-item>
                        <flexbox-item><button class="signup_button-next" @click="handleNextStep">下一步</button></flexbox-item>
                    </flexbox>
                </div>
            </div>
        </popup>

    </div>
</template>

<script>
import { Popup,TransferDom, Group, Cell, Flexbox, FlexboxItem } from 'vux'
import { mapState, mapMutations } from 'vuex'
export default {
    name: 'DetailSignupStep',
    components: {
        Popup,
        Group,
        Cell,
        Flexbox,
        FlexboxItem
    },
    directives: {
        TransferDom
    },
    props: {
        packageList: Array
    },
    data () {
        return {
            currentItemIndex: null,
            userinfo: this.common.getUserInfo()
        }
    },
    computed: {
        ...mapState({
            Detail_SignupShow: 'Detail_SignupShow',
            Detail_package: 'Register_package_json'
        }),
        currentSignupShow: {
            get: function () {
                return this.Detail_SignupShow
            },
            set: function (val) {

            }
        }
    },
    methods: {
        handleClickItem (item) {
            this.currentItemIndex = item
        },
        handleNextStep () {
            //进入报名页面 先检查packages有没有被选择 没有就提示
            this.register_package_record(this.packageList[this.currentItemIndex])
            if(this.currentItemIndex === null) {
                alert('请先选择套餐')
                return
            }
            //首先判断用户的性别
            if(!this.UserGenderAllow()){
                alert('您的性别不符合')
                return false
            }
            //还要判断用户票位是否足够


            this.$router.push('/Register')
        },
        handleCloseSignup () {
            this.close_Detail_Signup()           
        },
        UserGenderAllow () {
            let gender = this.userinfo.sex
            //判断票位性别是否允许
            if(this.Detail_package.requiresexlist != '不限'){
                if(this.Detail_package.requiresexlist == '男'){
                    if(gender == 1){
                        return true
                    }else{
                        return false
                    }
                }
                if(this.Detail_package.requiresexlist == '女'){
                    if(gender == 2){
                        return true
                    }else{
                        return false
                    }
                }
            }
            return true
        }
        ,
        ...mapMutations([
            'close_Detail_Signup',
            'open_Detail_Signup',
            'register_package_record'
        ])

    }
}
</script>

<style lang="stylus" scoped>
.vux-popup-dialog
    background: #fff
.weui-cell
    padding: .15rem .2rem
    box-sizing: border-box
    margin: .15rem .3rem
    background-color: #f4f4f4
    border: 1px solid #fff
    &:before
        border: 0
   
.signup >>> .weui-cells
    margin-top: 0
    &:before
        border-top: 0
    &:after
        border-bottom: 0
.vux-flexbox-item
    height: 100%
.signup
    .signup_box
        .active-border
            border: 1px solid #ff721f
        .signup_header
            text-align: center
            padding: .3rem 0
            font-size: .3rem
            border-bottom: 1px solid #ebebeb
        .signup_body_left
            .signup_body_left_title
                font-size: .38rem
                margin-bottom: .05rem
            .signup_body_left_remain
                font-size: .22rem
                color: #999999
                vertical-align: bottom
        .signup_body_right
            .signup_body_left_money
                color: #ed722e
            .signup_body_left_gift
                font-size: .22rem
                color: #999999
        .signup_bottom
            display: flex
            margin: .15rem .3rem
            .signup_bottom_tips
                flex: 1
                padding-left: .1rem
                font-size: .12rem
                line-height: .30rem
        .signup_button
            display: flex
            height: 1.19rem
            border-top: 1px solid #ebebeb
            font-size: .42rem
            .signup_button-cancel
                height: 100%
                width: 100%
                background-color: #fff
            .signup_button-next
                height: 100%
                width: 100%
                background-color: #ff721f
                color: #fff
</style>

